<template>
  <div class="main-box">
    <TreeFilter lazy :load="loadNode" @change="changeTreeFilter" />
    <div class="table-box">
      <ProTable :data="dataGrid.data" :columns="dataGrid.columns" :request-auto="false">
        <template #tableHeader>
          <GlobalButton :button-list="dataGrid.headButtonList"></GlobalButton>
        </template>

        <template #operation="{ row }">
          <GlobalButton :button-list="dataGrid.rowButtonList" :row-params="row"></GlobalButton>
        </template>
      </ProTable>

      <!-- 新增数据字典 -->
      <DialogForm
        :options="addForm.options"
        :title="addForm.title"
        :min-width="addForm.minWidth"
        :form-attrs="addForm.formAttrs"
        v-model:visible="addForm.visible"
        @get-model="(form: Dictionary.ReqSave) => (addForm.form = form)"
        @submit-form="saveAddForm"
      ></DialogForm>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useDataGrid } from "./mixins/dataGrid";
import { useTreeData } from "./mixins/treeData";
import { useAddForm } from "./mixins/addForm";
import { Dictionary } from "@/api/interface/auth/basic";

interface Tree {
  label: string;
  value: string;
  leaf: boolean;
  level: number;
}
const changeTreeFilter = async (row?: Tree): Promise<void> => {
  if (row?.level === 0) return;

  let code;
  if (row?.level === 1) {
    treeData.value.selectValue = row.value;
    code = row.value;
  } else {
    code = treeData.value.selectValue;
  }
  const data: any = await dictionaryListByCodes({ code });
  dataGrid.data = data ? data[0].value : [];
};
const { addForm, saveAddForm } = useAddForm(changeTreeFilter);
const { treeData, loadNode } = useTreeData();
const { dataGrid } = useDataGrid(changeTreeFilter, addForm, treeData.value);
</script>
